<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<cl-data-table
			ref="table"
			id="shopDayInfo"
			v-bind="table"
			:data="list"
			:loading="loading"
			auto-page
			full
		>
			<!-- <cl-pagefull @resize="onResize"> -->
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search" @reset="changeBiz">
						<cl-filter label="所属事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
								style="width: 150px"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="分公司">
							<cl-select
								v-model="search.company_id"
								placeholder="请选择"
								filterable
								style="width: 150px"
								clearable
							>
								<el-option label="全部" value="" />

								<el-option
									v-for="item in bizRefData.company"
									:key="item.company_id"
									:label="item.company_name"
									:value="item.company_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="全部"
								filterable
								style="width: 150px"
								clearable
								multiple
								collapse-tags
							>
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="所属门店">
							<cl-shop-select
								v-model="search.dept_id"
								placeholder="请选择"
								filterable
								style="width: 150px"
								clearable
								@change="changeDept"
								show-all
								:biz_id="search.biz_id"
							/>
						</cl-filter>
						<cl-filter label="门店老师">
							<teacherSelect ref="teacherSelect" v-model="search.teachers" />
						</cl-filter>
						<cl-filter label="到店类型">
							<cl-select
								v-model="search.cus_type"
								placeholder="请选择"
								filterable
								style="width: 120px"
								clearable
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in cusTypeList"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="是否分期">
							<cl-select
								v-model="search.is_rest"
								placeholder="请选择"
								filterable
								style="width: 100px"
								clearable
							>
								<el-option label="全部" value="" />
								<el-option label="是" :value="1" />
								<el-option label="否" :value="2" />
							</cl-select>
						</cl-filter>
						<cl-filter label="来源渠道">
							<cl-select
								v-model="search.channel_id"
								placeholder="请选择来源渠道"
								filterable
								clearable
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="(item, index) in sourceList"
									:key="index"
									:label="item.cname"
									:value="item.id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="服务项目">
							<!-- <cl-select
								v-model="search.si_id"
								placeholder="请选择服务项目"
								clearable
								filterable
							>
								<el-option
									v-for="(item, index) in sourceList"
									:key="index"
									:label="item.cname"
									:value="item.id"
								/>
							</cl-select> -->
							<el-input
								v-model="search.search_content"
								placeholder="请输入项目名称"
								clearable
							/>
						</cl-filter>
						<cl-filter label="时间">
							<cl-date-picker
								v-model="search.date"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								style="width: 210px"
								:clearable="false"
							/>
						</cl-filter>
					</cl-filter-group>
					<cl-flex1 />
					<cl-table-handle
						:print="printParams"
						:columns="initnewColumns"
						v-model="table.columns"
						@confirm="filterConfirm"
						@export-file="exportFile"
					/>
				</el-row>
			</template>

			<template #column-cus_type_text="{ scope: { row } }">
				<div
					class="cus_type"
					:class="{
						'color-primary': row.cus_type == 1,
						old: row.cus_type == 2,
						'color-danger': row.cus_type == 3,
						'color-warning': row.cus_type == 4
					}"
				>
					{{ row.cus_type_text }}
				</div>
			</template>

			<template #column-opt="{ scope: { row } }">
				<div class="flex flex-align-start">
					<el-button
						type="primary"
						v-auth="'store_cusdetailindex_look'"
						@click.stop="openDetail(row)"
					>
						详情
					</el-button>
				</div>
			</template>

			<!-- <el-row> -->
			<!-- 数据表格 -->
			<!-- <cl-table id="shopDayInfo" v-bind="table">
					<cl-empty slot="empty" />
					<template #column-cus_type="{ scope: { row } }">
						<div
							class="cus_type"
							:class="{
								'color-primary': row.cus_type == 1,
								old: row.cus_type == 2,
								'color-danger': row.cus_type == 3,
								'color-warning': row.cus_type == 4
							}"
						>
							{{ row.cus_type | constFilter("CUS_TYPE") }}
						</div>
					</template>
					<template #column-is_rest="{ scope: { row } }">
						<div :class="{ 'color-primary': row.is_rest }">
							{{ row.is_rest ? "是" : "否" }}
						</div>
					</template>
					<template #column-items_prod_type="{ scope: { row } }">
						<div>
							{{ row.items_prod_type | constFilter("ITEMS_PROD_TYPE") }}
						</div>
					</template>
					<template #column-opt="{ scope: { row } }">
						<div class="flex flex-align-start">
							<el-button type="primary" v-auth="'store_cusdetailindex_look'" @click.stop="openDetail(row)">
								详情
							</el-button>
						</div>
					</template>
				</cl-table> -->

			<!-- <cl-data-table
					ref="table"
					id="shopDayInfo"
					:loading="loading"
					:data="table"
					:columns="labelArray"
					:page.sync="page"
					:limit="20"
					:show-page="true"
					auto-page
					default-expand-all
					show-summary
					:summary-method="getSummaries"
					:height="tableHeight"
					border
					stripe
					full
				>

				</cl-data-table> -->
			<!-- </el-row> -->
			<!-- </cl-pagefull> -->

			<cl-empty slot="empty" />
		</cl-data-table>
	</cl-crud>
</template>

<script>
import dayjs from "dayjs";
import constant from "@/constant";
import { exportExcelCoustom } from "@/utils/excel";
import { constFilter } from "@/filters";
import teacherSelect from "@/components/teacher-select";

export default {
	name: "FinanceShopDayInfo",
	inject: ["$layout"],
	components: {
		teacherSelect
	},
	data() {
		return {
			printParams: {
				id: "shopDayInfo",
				popTitle: "店-日详情"
			},
			cusTypeList: constant.CUS_TYPE,
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [],
				showSummary: true,
				// summaryMethod: _.throttle(this.getSummaries, 50, { 'leading': true, 'trailing': true }),
				summaryMethod: () => {
					return this.summariesArr;
				},
				// summaryMethod: this.getSummaries,
				showPage: true,
				limit: 20
			},
			initnewColumns: [],
			initColumns: [
				{ label: "日期", prop: "appoint_date", width: 90, fixed: true, disable: true },
				{ label: "订单号", prop: "order_no", width: 90, fixed: true, disable: true },
				{
					label: "客户姓名",
					prop: "cus_name",
					minWidth: 120,
					fixed: true,
					align: "left",
					showOverflowTooltip: true
				},
				{ label: "会员号", prop: "cus_id", width: 100, fixed: true },
				{
					label: "所属事业部",
					prop: "biz_name",
					minWidth: 120,
					fixed: true,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "所属公司",
					prop: "company_name",
					minWidth: 120,
					fixed: true,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "所属大区",
					prop: "first_zone",
					minWidth: 120,
					fixed: true,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "所属门店",
					prop: "store_name",
					minWidth: 120,
					fixed: true,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "所属品牌",
					prop: "bra_name",
					minWidth: 100,
					fixed: true,
					align: "left",
					showOverflowTooltip: true
				},
				{ label: "到店类型", prop: "cus_type_text", width: 100, fixed: true },
				{
					label: "经营类目",
					prop: "items_f_category_name",
					minWidth: 120,
					fixed: true,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "服务项目",
					prop: "items_prod_name",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{ label: "是否分期", prop: "is_rest", width: 100 },
				{ label: "服务类型", prop: "items_prod_type", width: 100 },
				{
					label: "服务技师1",
					prop: "items_teacher_name",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "服务技师2",
					prop: "items_light_teacher",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "技师岗位",
					prop: "items_teacher_post",
					width: 100,
					formatter: row => constFilter(row.items_teacher_post, "TEACHER_POST_LIST")
				},
				{
					label: "门店店长",
					prop: "items_sell_teacher",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				// {
				// 	label: "顾问技师",
				// 	prop: "items_adviser_teacher",
				// 	minWidth: 100,
				// 	align: "left",
				// 	showOverflowTooltip: true
				// },
				// {
				// 	label: "光电顾问技师",
				// 	prop: "items_lightadviser_teacher",
				// 	minWidth: 100,
				// 	align: "left",
				// 	showOverflowTooltip: true
				// },
				{
					label: "定金客服",
					prop: "deposit_user_name",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "预约人",
					prop: "add_user_name",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "排店人",
					prop: "order_user_name",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{ label: "消费金额(￥)", prop: "mpay_amount", width: 120 },
				{ label: "服务手工费(￥)", prop: "items_sgmoney", width: 120 },
				{ label: "美容手工费(￥)", prop: "items_beauty_sgmoney", width: 120 },
				{ label: "成本金额(￥)", prop: "items_costmoney", width: 120 },
				{ label: "优惠金额(￥)", prop: "discount", width: 120 },
				{ label: "本次结算业绩(￥)", prop: "items_real_amount", width: 150 },
				{ label: "本次结算成本(￥)", width: 150, prop: "items_costmoney" },
				{ label: "耗卡业绩(￥)", prop: "newcard_consume", width: 150 },
				{ label: "剩余耗卡业绩(￥)", prop: "left_card_money", width: 150 },
				{ label: "商品数量", prop: "items_buy_num", width: 100 },
				{ label: "总收款(￥)", prop: "items_real_amount", width: 120 },
				{ label: "操作", prop: "opt", width: 100, disable: true, fixed: "right" }
			],
			search: {
				biz_id: "", //事业部
				dept_id: "", //门店
				company_id: "", //分公司
				bra_id: [], // 品牌
				cus_type: "", //类型
				teachers: "", // 老师
				channel_id: "",
				is_rest: "", //分期
				search_content: "", //项目名称
				si_id: "",
				date: [
					dayjs()
						.startOf("day")
						.format("YYYY-MM-DD"),
					dayjs()
						.endOf("day")
						.format("YYYY-MM-DD")
				]
			},
			loading: false,
			list: [],
			summariesArr: [],
			// 老师
			sourceList: []
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		this.init();
	},
	methods: {
		async init() {
			const { biz_id } = this.search;
			this.getBizRefBrand(biz_id);
			this.getBizRefCompany(biz_id);
			this.getBizRefShop(biz_id);
			this.initData();
		},
		async initData() {
			this.getTeacherList();
			this.getSourceList();
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.finance)
				.set("dict", {
					api: {
						page: "dayDetail"
					}
				})
				.done();
			// app.refresh(this.search);
		},
		async onRefresh(params, { next, render }) {
			this.loading = true;
			let initColumnsArr = [];
			initColumnsArr = [...this.initColumns];
			let { data_list, title_list } = await next(params).finally(() => {
				this.loading = false;
			});
			const dataList = data_list.map(item => {
				return {
					...item,
					cus_type_text: item.cus_type ? constFilter(item.cus_type, "CUS_TYPE") : "",
					items_prod_type: item.items_prod_type
						? constFilter(item.items_prod_type, "ITEMS_PROD_TYPE")
						: "",
					is_rest: item.is_rest ? "是" : "否"
				};
			});
			this.list = dataList;

			if (title_list.length) {
				let titleList = title_list.map((v, i) => ({
					label: v.name,
					prop: v.key,
					width: 100
				}));
				initColumnsArr.splice(initColumnsArr.length - 1, 0, ...titleList);
			}
			this.getSummaries({ columns: initColumnsArr });

			this.initnewColumns = initColumnsArr;
			this.table.columns = initColumnsArr;

			render(dataList);

			// this.$nextTick(() => {
			// 	this.$refs.table.doLayout();
			// })
		},
		// crud刷新
		refresh() {
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		onResize(h) {
			this.table.props.maxHeight = h;
		},
		// 详情
		openDetail(row) {
			this.$layout.openCusDetail(row, "order");
		},
		// 表格合计
		getSummaries({ columns, data }) {
			let ignore = [
				"appoint_date",
				"cus_name",
				"cus_id",
				"biz_name",
				"company_name",
				"items_sell_teacher",
				"items_adviser_teacher",
				"bra_name",
				"cus_type",
				"items_f_category_name",
				"items_prod_name",
				"is_rest",
				"items_prod_type",
				"items_teacher_name",
				"store_name",
				"opt",
				"cus_type_text",
				"items_teacher_post",
				"order_no"
			];
			const newArr = columns.map((column, index) => {
				if (index === 0) return "合计";
				if (ignore.includes(column.prop)) return "";
				const values = this.list.map(item => Number(item[column.prop]));
				let sum = values.reduce((prev, curr) => {
					const value = Number(curr);
					if (!isNaN(value)) {
						return prev + curr;
					}
					return prev;
				}, 0);
				return this.toFixed(sum);
			});
			// console.info("this.summariesArr", this.summariesArr)

			this.summariesArr = newArr;
			return newArr;
		},
		async changeBiz(v) {
			this.search = {
				...this.search,
				company_id: "",
				bra_id: [],
				dept_id: "",
				channel_id: ""
			};
			this.init();
		},
		//获取来源渠道
		async getSourceList() {
			const { biz_id } = this.search;
			this.sourceList = [];
			if (!biz_id) return;
			const data = await this.$service.source.list({ biz_id });
			this.sourceList = data;
		},
		// 切换门店
		changeDept() {
			this.search.teachers = "";
			this.getTeacherList();
			// this.refresh();
		},
		// 老师列表
		async getTeacherList() {
			const { biz_id, dept_id } = this.search;
			if (!biz_id) return;

			this.$nextTick(() => {
				this.$refs.teacherSelect.init({
					dept_id,
					biz_id,
					status: 1,
					is_teacher: 1
				});
			});
		},
		// 导出EXCEl
		exportFile() {
			exportExcelCoustom("店-日详情", this.list, this.table.columns, this.summariesArr);
		},
		// 表头筛选
		filterConfirm(columns) {
			this.getSummaries({ columns: columns });
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-table--scrollable-x {
		.el-table__body-wrapper {
			z-index: 2;
		}
	}
}
</style>
